<template>
	<view>
		<action-bar backTitle="返回" title="用户信息"></action-bar>
		<view class="text-center" style="padding-top: 75rpx;">
			<view class="cu-avatar round xl" :style="'background-image:url(' + userInfo.userInfo.avatarUrl + ')'"></view>
			<view class="margin-top-sm" v-text="userInfo.userInfo.nickname"></view>
		</view>
		
		<view class="text-center flex solid-bottom padding justify-center">
			<view class="padding shadow-blur padding-lr-xl margin-lr-xl">
				<view>本月花费<text class="text-price text-red text-lg" v-text="userInfo.recordInfo.total || 0"></text></view>
			</view>
			<view style="line-height: 40px;">|</view>
			<view class="padding shadow-blur padding-lr-xl margin-lr-xl">
				<view>本月记账<text class="text-price text-red text-green"  v-text="userInfo.recordInfo.count || 0"></text></view>
			</view>
		</view>
		
		<form>
			<view class="cu-form-group">
				<view class="title">所属账本</view>
				<input type="text" :value="userInfo.recordInfo.bookName" disabled>
			</view>
			<view class="cu-form-group" style="margin-bottom: 50rpx;">
				<view class="title">用户昵称</view>
				<input type="text" placeholder="用户昵称" name="nickName" :value="userInfo.userInfo.nickname">
			</view>
			
			<view class="cu-form-group" v-for="(item, index) in rights">
				<view class="title" v-text="item.name"></view>
				<switch @click="changePermission(item.id)" :checked="defaultPermissions.indexOf(item.id) > -1"></switch>
			</view>
			<view>
				<button @click="savePermission()" class="cu-btn block margin-top margin-lr bg-blue">确定</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: undefined,
				bookId: undefined,
				userInfo: {},
				
				rights: [],
				defaultPermissions: [],  
				userPermissions: [],
			}
		},
		onLoad(option) {
			this.userId = option.uid
			this.bookId = option.bookId
			this.avatarUrl = option.avatarUrl
			
			this.getPermissions()
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.$request({
					url: `/user/info/${this.userId}/${this.bookId}`
				}).then(res => {
					console.log(res);
					this.userInfo = res.data.info
					this.defaultPermissions = res.data.info.permissions
					this.userPermissions = res.data.info.permissions
				})
			},
			getPermissions() {
				this.rights = this.$store.state.rightMenus || []
				if (this.rights == []) {
					console.error('获取权限列表失败')
				}
			},
			getUserPermissions() {
				this.$request({
					url: ``
				})
			},
			savePermission() {
				if (this.$store.state.currentBookUserId != this.$store.getters.id) {
					this.$message.info('没有操作权限')
					return
				}
				if (this.userPermissions.length > 0) {
					this.$request({
						url: `/user/permission`,
						method: 'put',
						data: {
							permissions: this.userPermissions,
							userId: this.userId,
							bookId: this.bookId
						}
					}).then(res => {
						if (res) {
							this.$message.success('操作成功!')
						}
					})
				} else {
					this.$message.info('请为用户赋予权限')
				}
			},
			// 权限控制
			changePermission(val) {
				let idx = this.userPermissions.indexOf(val);
				if (idx > -1) {
					this.userPermissions.splice(idx, 1)
				} else {
					this.userPermissions.push(val)
				}
			}
		}
	}
</script>

<style>
	
</style>
